<template>
  <div class="laundry-tip-management" v-if="isSuperAdmin">
    <div class="header-section">
      <h2>洗护小知识管理</h2>
      <el-button type="primary" round @click="showCreateDialog" class="add-btn">
        <i class="fas fa-plus"></i> 添加小知识
      </el-button>
    </div>

    <el-table
        :data="tips"
        style="width: 100%; border-radius: 8px; overflow: hidden;"
        class="custom-table"
        :row-class-name="tableRowClassName"
    >
      <el-table-column prop="title" label="标题" min-width="200">
        <template #default="{ row }">
          <span class="table-text">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" min-width="300" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <span class="table-text">{{ row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isActive" label="状态" width="120" align="center">
        <template #default="{ row }">
          <el-tag
              :type="row.isActive ? 'success' : 'danger'"
              effect="dark"
              size="small"
              class="status-tag"
          >
            {{ row.isActive ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button
              size="small"
              type="primary"
              plain
              @click="showEditDialog(row)"
              class="action-btn"
          >
            <i class="fas fa-edit"></i> 编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              plain
              @click="deleteTip(row.tipId)"
              class="action-btn"
          >
            <i class="fas fa-trash"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="500px"
        class="custom-dialog"
        :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="100px" class="dialog-form">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" placeholder="请输入标题" class="input-field" />
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input
              v-model="form.content"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              class="textarea-field"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
              v-model="form.isActive"
              active-text="启用"
              inactive-text="禁用"
              active-color="#3B82F6"
              inactive-color="#E5E7EB"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" round class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="submitForm" round class="confirm-btn">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div v-else class="no-permission">
    <i class="fas fa-lock"></i>
    <p>您没有权限访问此页面</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tips: [],
      dialogVisible: false,
      dialogTitle: '',
      form: {
        tipId: null,
        title: '',
        content: '',
        isActive: true,
      },
    };
  },
  computed: {
    isSuperAdmin() {
      const adminInfo = this.$store.state.adminInfo || { role: '' };
      return adminInfo.role === 'super';
    },
  },
  mounted() {
    if (this.isSuperAdmin) {
      this.fetchTips();
    }
  },
  methods: {
    fetchTips() {
      axios
          .get('/api/laundry-tips', {
            headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` },
          })
          .then((response) => {
            this.tips = response.data;
          })
          .catch((error) => {
            this.$message.error('获取洗护小知识失败');
            console.error(error);
          });
    },
    showCreateDialog() {
      this.dialogTitle = '添加洗护小知识';
      this.form = { tipId: null, title: '', content: '', isActive: true };
      this.dialogVisible = true;
    },
    showEditDialog(row) {
      this.dialogTitle = '编辑洗护小知识';
      this.form = { ...row };
      this.dialogVisible = true;
    },
    submitForm() {
      const url = this.form.tipId ? `/api/laundry-tips/${this.form.tipId}` : '/api/laundry-tips';
      const method = this.form.tipId ? 'put' : 'post';
      axios({
        method,
        url,
        data: this.form,
        headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` },
      })
          .then(() => {
            this.$message.success(this.form.tipId ? '更新成功' : '添加成功');
            this.dialogVisible = false;
            this.fetchTips();
          })
          .catch((error) => {
            this.$message.error('操作失败');
            console.error(error);
          });
    },
    deleteTip(tipId) {
      this.$confirm('确定删除此洗护小知识吗？', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'el-button--danger',
      })
          .then(() => {
            axios
                .delete(`/api/laundry-tips/${tipId}`, {
                  headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` },
                })
                .then(() => {
                  this.$message.success('删除成功');
                  this.fetchTips();
                })
                .catch((error) => {
                  this.$message.error('删除失败');
                  console.error(error);
                });
          });
    },
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
  },
};
</script>

<style scoped>
:root {
  --primary-color: #3B82F6;
  --secondary-color: #10B981;
  --text-dark: #1F2937;
  --text-muted: #6B7280;
  --bg-light: #F8FAFC;
  --card-bg: #FFFFFF;
}

.laundry-tip-management {
  padding: 24px;
  background: var(--bg-light);
  min-height: calc(100vh - 112px);
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-dark);
}

.add-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-table {
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-table >>> .el-table__header th {
  background: #F1F5F9;
  color: var(--text-dark);
  font-weight: 600;
}

.even-row {
  background: var(--card-bg);
}

.odd-row {
  background: #F9FAFB;
}

.table-text {
  font-size: 14px;
  color: var(--text-dark);
}

.status-tag {
  font-weight: 500;
}

.action-btn {
  padding: 6px 12px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.custom-dialog >>> .el-dialog {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.custom-dialog >>> .el-dialog__header {
  background: #F1F5F9;
  border-radius: 12px 12px 0 0;
  padding: 16px 24px;
}

.custom-dialog >>> .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}

.dialog-form {
  padding: 20px;
}

.input-field, .textarea-field {
  width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.cancel-btn:hover, .confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.no-permission {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 112px);
  color: var(--text-muted);
  font-size: 16px;
}

.no-permission i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #9CA3AF;
}
</style>